<template>
  <div class="extend-class">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/2">推广列表详情页面</el-menu-item>
      </el-menu>
    </div>

    <div class="el-main">
      <!-- 返回按钮 -->
      <div class="btn-back">
        <el-button @click="$router.push('/extension-list')" size="small">返回推广列表</el-button>
      </div>
      <!-- 查询表单 -->
      <div class="sizerBox">
        <el-form ref="storeRef" inline :model="form">
          <el-form-item label="店铺ID/名称" prop="store_name">
            <el-input v-model="form.store_name"></el-input>
          </el-form-item>
          <el-form-item label="推广收益筛选">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="clearInput">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询表格 -->
      <div class="result">
        <span>推广店铺数量:6</span>
        <span>推广收益金额:5862.12</span>
      </div>
      <div class="extend-tab">
        <el-table :data="tableData">
          <el-table-column prop="id" label="店铺ID"> </el-table-column>
          <el-table-column prop="store_name" label="店铺名称"> </el-table-column>
          <el-table-column prop="address" label="店铺地址"> </el-table-column>
          <el-table-column prop="phone" label="店铺联系电话"> </el-table-column>
          <el-table-column prop="date" label="推广开店日期"> </el-table-column>
          <el-table-column prop="saleroom" label="推广收益"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'extension',
  props: [''],
  data() {
    return {
      form: {
        id: '',
        store_name: '',
        address: '',
        phone: '',
        date: '',
        saleroom: '',
        date1: '',
        date2: ''
      },
      // 获取所有数据
      tableData: []
    }
  },
  created() {
    this.getUserList()
  },
  components: {},

  computed: {},

  methods: {
    // 渲染全部数据
    async getUserList() {
      const { data } = await this.$http.get('/store')
      // console.log(data)
      this.tableData = data
    },
    // 按条件查询
    async onSubmit() {
      // 如果没有选择或者输入任何条件,查询所有的数据
      if (this.form.store_name === '') {
        return this.getUserList()
        // console.log('获取全部数据')
      }

      // 先将数据清空
      this.tableData = []
      if (this.form.store_name) {
        // 根据用户名查询
        const { data } = await this.$http.get(`/store?store_name_like=${this.form.store_name}`)
        // 根据店铺ID查询
        const { data: data1 } = await this.$http.get(`/store?id_like=${this.form.store_name}`)
        if (data.length > 0) {
          this.tableData = data
        } else if (data1.length > 0) {
          this.tableData = data1
        }
      }
    },
    // 清空表单事件
    clearInput() {
      this.$refs.storeRef.resetFields()
      this.store_name = ''
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.extend-class {
  width: 100%;
  .el-header {
    height: 70px !important;
    padding: 0;
    width: 100%;
  }
  .el-main {
    padding: 15px;
    .btn-back {
      .el-button {
        width: 150px;
        height: 30px;
        font-size: 14px;
        margin-bottom: 10px;
        border: 1px solid #a9a9a9;
        border-radius: 5px;
      }
    }
    /deep/.sizerBox {
      height: 100px;
      border: 1px solid #a9a9a9;
      border-radius: 5px;
      box-sizing: border-box;
      .el-form-item {
        margin: 27px 30px 10px 30px;
        .el-input__inner {
          width: 175px;
        }
        .el-button {
          margin-left: 30px;
        }
      }
    }
  }
  .result {
    height: 40px;
    line-height: 40px;
    span {
      font-size: 14px;
      color: #606266;
      margin-right: 20px;
    }
  }
  .extend-tab {
    border: 1px solid #a9a9a9;
    border-radius: 10px;
    padding: 10px;
  }
}
</style>
